<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="注册配置" name="UserConfig">
      <el-form-item label="邀请人检测：">
        <el-radio-group v-model="configValue.needInviter">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
        <span class="tip">{{ configValue.needInviter ? '开启' : '关闭' }} 新用户注册强制需要填写邀请人</span>
      </el-form-item>

      <el-form-item label="单点登录模式：">
        <el-radio-group v-model="configValue.openSingleLogin">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="密码登录开关：">
        <el-radio-group v-model="configValue.openPasswordLogin">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="令牌刷新开关：">
        <el-radio-group v-model="configValue.openRefreshToken">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">默认昵称规则</el-divider>

      <el-form-item label="昵称前缀模板：">
        <DynamicTags :dynamic-tags="namePrefixList"/>
      </el-form-item>

      <el-form-item label="昵称后缀长度：">
        <el-input-number v-model="configValue.nameSuffixLength" :max="13" :min="3" :precision="0" :step="1" controls-position="right"/>
      </el-form-item>

      <el-form-item label="使用手机后缀：">
        <el-radio-group v-model="configValue.openPhoneSuffix">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
        <span class="tip">{{ configValue.openPhoneSuffix ? '开启' : '关闭' }} 使用手机号后 {{ configValue.nameSuffixLength }} 位生成昵称</span>
      </el-form-item>

      <el-form-item label="用户默认头像：">
        <el-input v-model="configValue.defaultAvatar" :autosize="{ minRows: 1}" :readonly="readonly" placeholder="请输入或点击下方设置" type="textarea"/>
        <UploadImage v-model="configValue.defaultAvatar" :readonly="readonly" style="margin-top: 6px"/>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">登录密码规则</el-divider>

      <el-form-item label="登录密码规则：">
        <el-input v-model="configValue.passwordRegex" placeholder="请输入密码正规则"/>
      </el-form-item>

      <el-form-item label="密码错误提示：">
        <el-input v-model="configValue.passwordErrorTip"
                  :autosize="{ minRows: 1, maxRows: 4}"
                  :readonly="readonly" placeholder="请输入密码错误提示" type="textarea"/>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">用户昵称规则</el-divider>

      <el-form-item label="昵称修改：">
        <el-radio-group v-model="configValue.nicknameModifyEnable">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="昵称正规则：">
        <el-input v-model="configValue.nicknameRegex" placeholder="请输入昵称正规则"/>
      </el-form-item>

      <el-form-item label="昵称异常提示：">
        <el-input v-model="configValue.nicknameRegexErrorTip"
                  :autosize="{ minRows: 1, maxRows: 4}"
                  :readonly="readonly" placeholder="请输入昵称不符合提示" type="textarea"/>
      </el-form-item>

      <el-form-item label="昵称长度方式：">
        <el-radio-group v-model="configValue.nicknameCheckBytes">
          <el-radio-button :value="1">字节</el-radio-button>
          <el-radio-button :value="0">数量</el-radio-button>
        </el-radio-group>
        <span class="tip">长度计算方式</span>
      </el-form-item>

      <el-form-item label="昵称最小长度：">
        <el-input-number v-model="configValue.nicknameMinLength" :max="12" :min="3" :precision="0" :step="1" controls-position="right"/>
      </el-form-item>

      <el-form-item label="昵称最大长度：">
        <el-input-number v-model="configValue.nicknameMaxLength" :max="24" :min="configValue.nicknameMinLength" :precision="0" :step="1" controls-position="right"/>
      </el-form-item>

      <el-form-item label="昵称长度提示：">
        <el-input v-model="configValue.nicknameLengthErrorTip"
                  :autosize="{ minRows: 1, maxRows: 4}"
                  :readonly="readonly" placeholder="请输入昵称长度错误提示" type="textarea"/>
      </el-form-item>
    </el-tab-pane>

    <el-tab-pane label="其他配置" name="OtherConfig">
      <el-form-item label="异常日志开关：">
        <el-radio-group v-model="configValue.showLoginAbnormalLog">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="最大错误次数：">
        <el-input-number v-model="configValue.passwordMaxRetryCount" :min="0" :step="1" controls-position="right"/>
      </el-form-item>

      <el-form-item label="异常锁定时间：">
        <el-input-number v-model="configValue.passwordAbnormalLockTime" :min="1" :step="1" controls-position="right"/>
        <span class="tip">单位：分钟</span>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">Ip地址登录限制配置</el-divider>

      <el-form-item label="Ip地址登录限制：">
        <el-input-number v-model="configValue.ipAddressLoginLimit" :min="0" :step="1" controls-position="right"/>
        <span class="tip">单个Ip地址每日最大能登录的账号数量</span>
      </el-form-item>

      <el-form-item label="Ip地址限制提示：">
        <el-input v-model="configValue.ipAddressLoginLimitTip"
                  :autosize="{ minRows: 1}"
                  :readonly="readonly" placeholder="请输入错误提示文本" type="textarea"/>
        <span class="tip">单个Ip地址达到每日最大能登录的账号数量后的错误提示</span>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">设备绑定限制配置</el-divider>

      <el-form-item label="是否开启检测：">
        <el-radio-group v-model="configValue.openDeviceCheck">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
        <span class="tip">是否开启 设备号/账号 绑定限制检测</span>
      </el-form-item>

      <el-form-item label="设备绑定账号：">
        <el-input-number v-model="configValue.deviceMaxBindCount" :min="1" :step="1" controls-position="right"/>
      </el-form-item>

      <el-form-item label="超出限制提示：">
        <el-input v-model="configValue.deviceMaxBindErrorTip"
                  :autosize="{ minRows: 1}"
                  :readonly="readonly" placeholder="请输入错误提示文本" type="textarea"/>
        <span class="tip">单设备绑定的账号超出限制数量后的错误提示</span>
      </el-form-item>

      <el-form-item label="账号绑定设备：">
        <el-input-number v-model="configValue.accountMaxBindCount" :min="1" :step="1" controls-position="right"/>
      </el-form-item>

      <el-form-item label="超出限制提示：">
        <el-input v-model="configValue.accountMaxBindErrorTip"
                  :autosize="{ minRows: 1}"
                  :readonly="readonly" placeholder="请输入错误提示文本" type="textarea"/>
        <span class="tip">账号 绑定设备超出限制后的错误提示</span>
      </el-form-item>
    </el-tab-pane>

    <el-tab-pane label="分享配置" name="ShareConfig">
      <el-form-item label="分享标题：">
        <el-input v-model="configValue.inviteTitle"
                  :autosize="{ minRows: 1, maxRows: 4}"
                  :readonly="readonly" placeholder="请输入分享标题" type="textarea"/>
      </el-form-item>

      <el-form-item label="分享描述：">
        <el-input v-model="configValue.inviteDesc" :autosize="{ minRows: 1, maxRows: 4}" :readonly="readonly" placeholder="请输入分享描述" type="textarea"/>
      </el-form-item>

      <el-form-item label="分享图标：">
        <el-input v-model="configValue.inviteIcon" :autosize="{ minRows: 1}" :readonly="readonly" placeholder="请输入分享图标" type="textarea"/>
        <UploadImage v-model="configValue.inviteIcon" :readonly="readonly" style="margin-top: 6px"/>
      </el-form-item>

      <el-form-item label="邀请链接地址：">
        <el-input v-model="configValue.inviteUrl"
                  :autosize="{ minRows: 1, maxRows: 4}"
                  :readonly="readonly" placeholder="请输入邀请链接地址" type="textarea"/>
      </el-form-item>

      <el-form-item label="链接地址参数：">
        <el-input v-model="configValue.inviteUrlParam" :readonly="readonly" placeholder="请输入链接地址参数"/>
      </el-form-item>

      <el-alert :closable="false" :title="`最终邀请链接地址: ${configValue.inviteUrl }?${configValue.inviteUrlParam}=邀请码`" class="alert-first-margin" type="info"/>

    </el-tab-pane>

    <el-tab-pane label="特殊配置" name="SpecialConfig">
      <el-form-item label="粉丝账号隐藏：">
        <el-radio-group v-model="configValue.hideSensitiveFans">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
        <span class="tip">{{ configValue.hideSensitiveFans ? '开启' : '关闭' }} 隐藏 粉丝账号 功能</span>
      </el-form-item>

      <el-form-item label="邀请人账号隐藏：">
        <el-radio-group v-model="configValue.hideSensitiveInviter">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
        <span class="tip">{{ configValue.hideSensitiveInviter ? '开启' : '关闭' }} 隐藏 邀请人账号 功能</span>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left"></el-divider>

      <el-form-item label="有效用户消费：">
        <el-input-number v-model="configValue.validConsumeVal" :min="1" :precision="0" :step="1" controls-position="right"/>
        <span class="tip">用户 商城消费 达到配置值</span>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left"></el-divider>

      <el-form-item label="资金提现分润：">
        <MultipleSelect v-model="withdrawShareTypes" :options="withdrawShareOptions" placeholder="请选择资金类型"/>
        <span class="tip">指定资金类型提现触发分润业务 (空:不分润)</span>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left"></el-divider>

      <el-form-item label="线下收款地址：">
        <el-input v-model="configValue.storePayUrl"
                  :autosize="{ minRows: 1, maxRows: 2}"
                  :readonly="readonly" placeholder="请输入线下收款链接地址" type="textarea"/>
      </el-form-item>

      <el-form-item label="链接地址参数：">
        <el-input v-model="configValue.storePayUrlParam" :readonly="readonly" placeholder="请输入链接地址参数"/>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left"></el-divider>

      <el-form-item label="商家图标：">
        <el-input v-model="configValue.storeIcon" :autosize="{ minRows: 1}" :readonly="readonly" placeholder="请输入商家图标地址" type="textarea"/>
        <UploadImage v-model="configValue.storeIcon" :readonly="readonly" style="margin-top: 6px"/>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left"></el-divider>
    </el-tab-pane>
  </el-tabs>

</template>

<script lang="ts" setup>
import { computed, PropType, ref } from 'vue';
import { UploadImage } from '@/components/upload';
import { DynamicTags } from '@/components/dynamic-tags';
import { DynamicItem } from '@/components/dynamic-tags/src/types.ts';
import { dictTypeMap } from '@/utils/global-dict.ts';
import { MultipleSelect } from '@/components/other';

defineOptions({name: 'UserRuleConfig'})

const withdrawShareTypes = defineModel<Number[]>('withdrawShareTypes');

const props = defineProps({
  configValue: {
    type: Object,
    required: true
  },
  configType: {
    type: Number,
    default: 0,
    required: true
  },
  readonly: {
    type: Boolean,
    default: false
  },
  namePrefixList: {
    type: Array as PropType<DynamicItem[]>,
    default() {
      return []
    }
  },
});

const withdrawShareOptions = computed(() => {
  let data = dictTypeMap['money_capital_type'] || [];
  return data.filter(it => it.value == 11 || it.value == 12);
});

const activeName = ref('UserConfig');
</script>

<style lang="scss" scoped>

</style>
